<!DOCTYPE html>
<html>
<head>
<title>Rolling Wheel Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    background-color: #ffffff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Parameters using canvas coordinate system (y-down, angles clockwise)
const cx = canvas.width / 2;
const cy = 180;
const r = 100;
const lineWidth = 2;
const font = '22px serif';
const subfont = 'italic 18px serif';

// Helper function to draw an arrow
function drawArrow(fromx, fromy, tox, toy, headlen = 10) {
    const angle = Math.atan2(toy - fromy, tox - fromx);
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
}

// --- Drawing ---
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = font;

// 1. Draw the horizontal surface
ctx.beginPath();
ctx.moveTo(cx - r * 2, cy + r);
ctx.lineTo(cx + r * 2, cy + r);
ctx.stroke();

// 2. Draw the wheel
ctx.beginPath();
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.stroke();

// 3. Labels O and M
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('M', cx, cy + r + 20);
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
ctx.fillText('O', cx + 5, cy + 5);


// 4. Center of mass velocity vector v_c
const vc_len = 90;
drawArrow(cx, cy, cx + vc_len, cy);
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.fillText('v', cx + vc_len + 10, cy);
ctx.font = subfont;
ctx.fillText('c', cx + vc_len + 19, cy + 6);
ctx.font = font;


// 5. Angular velocity ω
const omega_radius = r + 15;
// Using canvas angles (clockwise): start at -45 deg, end at +45 deg
const omega_angle_start = -Math.PI / 4;
const omega_angle_end = Math.PI / 4;
ctx.beginPath();
ctx.arc(cx, cy, omega_radius, omega_angle_start, omega_angle_end);
// Arrow head for ω
const omega_arrow_x = cx + omega_radius * Math.cos(omega_angle_end);
const omega_arrow_y = cy + omega_radius * Math.sin(omega_angle_end);
const tangent_angle = omega_angle_end + Math.PI / 2; // Tangent for clockwise arc
ctx.moveTo(omega_arrow_x, omega_arrow_y);
ctx.lineTo(omega_arrow_x - 8 * Math.cos(tangent_angle - Math.PI / 6), omega_arrow_y - 8 * Math.sin(tangent_angle - Math.PI / 6));
ctx.moveTo(omega_arrow_x, omega_arrow_y);
ctx.lineTo(omega_arrow_x - 8 * Math.cos(tangent_angle + Math.PI / 6), omega_arrow_y - 8 * Math.sin(tangent_angle + Math.PI / 6));
ctx.stroke();
ctx.fillText('ω', cx + r * 0.9, cy - r * 0.7);


// 6. Point A and dashed lines
// Using canvas angles: 0 is right, PI/2 is down, PI is left, 3PI/2 is up.
// Point A is in top-left, which is between PI and 3PI/2. We'll use 4*PI/3 (240 deg) to match the diagram's appearance.
const angle_A_canvas = 4 * Math.PI / 3;
const Ax = cx + r * Math.cos(angle_A_canvas);
const Ay = cy + r * Math.sin(angle_A_canvas);

// Set line to dashed
ctx.setLineDash([5, 5]);

// Dashed line OM (vertical)
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(cx, cy + r);
ctx.stroke();

// Dashed line OA
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(Ax, Ay);
ctx.stroke();

// Reset to solid line
ctx.setLineDash([]);

// Label A
ctx.textAlign = 'right';
ctx.textBaseline = 'bottom';
ctx.fillText('A', Ax - 5, Ay - 5);


// 7. Angle θ
const angle_M_canvas = Math.PI / 2; // 90 deg, downward vertical
const theta_arc_radius = 40;

// Right angle marker between OM (down) and OC (right)
const right_angle_size = 25;
ctx.beginPath();
ctx.moveTo(cx, cy + right_angle_size);
ctx.lineTo(cx + right_angle_size, cy + right_angle_size);
ctx.lineTo(cx + right_angle_size, cy);
ctx.stroke();

// Arc for theta, CCW from M to A, matching the diagram's visual.
ctx.beginPath();
ctx.arc(cx, cy, theta_arc_radius, angle_M_canvas, angle_A_canvas, false); // false for CCW
ctx.stroke();

// Label theta
const theta_label_angle = (angle_M_canvas + angle_A_canvas) / 2;
const theta_label_radius = 25;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('θ', cx + theta_label_radius * Math.cos(theta_label_angle), 
                  cy + theta_label_radius * Math.sin(theta_label_angle));

// 8. Caption text
ctx.font = '24px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('力图 1.14.1', cx, canvas.height - 30);

</script>
</body>
</html>